<template>
  <view class="flex-row">
    <scroll-view scroll-y class="province scroll">
      <view
        v-for="(item,index) in area"
        :key="item.value"
        class="item flex-row flex-center"
        :class="{'save-province':index===provinceInx}"
        @click="chooseProvince(item,index)"
      >
        <text class="text-30 color-t1">{{ item.label }}</text>
      </view>
    </scroll-view>
    <scroll-view scroll-y class="city scroll">
      <view
        v-for="(item,index) in city"
        :key="item.value"
        class="item flex-row flex-center city-item"
        @click="chooseCity(item,index)"
      >
        <text class="text-30" :class="['color-'+(index===cityInx?'primary':'t1')]">{{ item.label }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import Area from '@/common/area.json'
export default {
  name: 'AreaModel',
  data() {
    const saveProvince = Area[0].value
    return {
      area: Area,
      saveProvince,
      provinceInx: 0,
      cityInx: 0
    }
  },
  computed: {
    city() {
      const list = [{
        label: '全部',
        value: 0
      }]
      const cityList = this.area[this.provinceInx].children
      list.push(...cityList)
      return list
    }
  },
  methods: {
    chooseProvince(item, index) {
      this.saveProvince = item.value
      this.provinceInx = index
      this.cityInx = 0
    },
    chooseCity(item, index) {
      this.cityInx = index
      const arr = [this.saveProvince]
      if (index) arr.push(item.value)
      this.$emit('choose', arr)
    }
  }
}
</script>

<style scoped lang="scss">
.province{
  flex:1;
  background:$color-background;
}
.city{
  flex:2;
  background: #FFFFFF;
}
.scroll{
  height:800rpx;
}
.item{
  height:100rpx;
}
.item:last-child{
  border:none;
}
.city-item{
  border-bottom:2rpx solid $color-border;
}
.save-province{
  background:#ffffff;
}
</style>
